<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-06-30 14:33:48
 * @LastEditTime : 2023-10-13 10:45:45
-->
<script lang="ts" setup name="logDetail">
import { useFields } from './fields'
import { logApi } from '@/MainApp/apis/log'
import type { ISearchForm } from '@/global/enums/search'

const props = defineProps({
  detailId: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = defineModel({
  type: Boolean,
  default: false
})

const { systemFieldList } = useFields()
const logDetail = ref<Array<ISearchForm>>([])
const queryDetail = async () => {
  const { success, data } = await logApi.getLogDetail(props.detailId)
  if (success) {
    const list: any = []
    systemFieldList.value.forEach((item: ISearchForm) => {
      const { key } = item
      list.push({
        ...item,
        value: data[key]
      })
    })
    logDetail.value = list
  }
}

watch(
  () => visible.value,
  (bool: boolean) => {
    bool && queryDetail()
  }
)

const goBack = () => {
  emit('update:modelValue', false)
}
// 新增、修改
</script>

<template>
  <IkDetail :visible="visible" :header-props="{ autoClose: false }" @back="goBack">
    <el-row
      v-for="(item, index) in logDetail"
      :key="index"
      :gutter="50"
      class="detail-cen"
    >
      <el-col :span="5" class="detail-left">
        {{ item?.label }}
      </el-col>
      <el-col v-if="item.key === 'success'" :span="18" class="detail-right">
        {{ item.key === 'success' ? '成功' : '失败' }}
      </el-col>
      <el-col v-if="item.key !== 'success'" :span="18" class="detail-right">
        {{ item.value }}
      </el-col>
    </el-row>
  </IkDetail>
</template>

<style scope lang="scss">
.detail-page {
  background-color: var(--el-bg-color);

  .detail-back {
    padding: 16px;
  }

  .detail-cen {
    margin-top: 15px;
    font-size: 14px;

    .detail-left {
      float: right;
      display: flex;
      justify-content: flex-end;
    }

    .detail-right {
      font-size: 12px;
    }
  }
}
</style>
